<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>STATEFUL FORM TEST</title>
    <script type="text/javascript" src="../../dist/index.web.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript">
      function IntroHook(){
        const { register, handleSubmit, errors, ref, control, getValues } = useForm({defaultValues:{serverName:'my web app'}});
        const [size, setSize] = useState([1]);
        const [results, setResults] = useState({});
        const onSubmit = (data) => {
          setResults(data)
          console.log('submission:',JSON.stringify(data));
        };

        console.log('errors',errors);
        const exposeprops = {size, setSize, _onSubmit:onSubmit, register, handleSubmit, errors, ref, control, getValues, results};

        return {
          component:'div',
          props:{key:1},
          passprops:['register','size','setSize','getValues','results','_onSubmit',],
          children:[
            {
              component:'label',
              props:{
                htmlFor:'serverName',
                key:2
              },
              useincludeprops:['htmlFor','key'],
              children:'Server Name'
            },
            {
              component:'input',
              props:{
                placeholder:'Server',
                name:'serverName',
                id:'serverName',
                key:3,
                style:{
                  width:'100px'
                }
              },
              useincludeprops:['style','name','id','placeholder','key','ref','onBlur','onChange'],
              // thisprops:{
              //   ref:['register'],
              // },
              __dangerouslyEvalAllProps:function({jsonx}){
								return jsonx.props.register(jsonx.props.name)
							}
            },
            {
              component:'h1',
              children:'inputs',
              props:{key:4},
              useincludeprops:[]
            },
            {
              component:'div',
              props:{
                key:5
              },
              passprops:['size','register','__idx'],
              __spreadComponent:{
                component:'section',
                props:{key:6},
                passprops:true,
                children:[
                  { 
                    component:'label', 
                    children:'API Name',
                    __dangerouslyEvalAllProps: function({jsonx}){
                      // console.log('arguments',arguments)
                      // console.log('this',this)
                      return {
                        key:`label-api[${jsonx.props.__idx}].name`,
                      }
                    }

                  },
                  {
                    component:'input',
                    __dangerouslyEvalAllProps: function({jsonx}){
                      // console.log('arguments',arguments)
                      // console.log('this',this)
                      const inputProps = jsonx.props.register(`api[${jsonx.props.__idx}].name`)
                      return {
                        name:`api[${jsonx.props.__idx}].name`,
                        key:`api[${jsonx.props.__idx}].name`,
                        style:{
                          width:'100px'
                        },
                        ...inputProps
                      }
                    }
                  },
                ],
              },
              thisprops:{
                __spread:['size']
              },
            },
            {
              component:'button',
              props:{
                id:'addAPI',
                key:55
              },
              __dangerouslyBindEvalProps:{
                onClick(size,setSize){
                  const newSize = [].concat(size);
                  newSize.push(1);
                  setSize(newSize);
                },
              },
              useincludeprops:['size','setSize','id','onClick','key'],
              children:'Add API'
            },
            {
              component:'button',
              props:{
                type:'submit',
                id:'submitButton',
                key:66
              },
              __dangerouslyBindEvalProps:{
                onClick(_onSubmit, getValues){
                  return _onSubmit(getValues())
                },
              },
              useincludeprops:['type','id','_onSubmit','getValues','onClick','key'],
              children:'Submit'
            },
            {
              component:'hr',
              props:{
                key:99
              },
              useincludeprops:[],
            },
            {
              component:'h3',
              props:{
                key:88
              },
              useincludeprops:[],
              children:'Results'
            },
            {
              component:'pre',
              ___stringifyChildren:true,
              props:{
                id:'advanedFormResults',
                key:77
              },
              useincludeprops:['results','key','id'],
              thisprops:{
                children:['results']
              }
            }
          ],
        }
      }
      const IntroHookComponent = jsonx._jsonxComponents.makeFunctionComponent(IntroHook)
      const boundConfig = {
        reactComponents:{
          IntroHookComponent,
        },
      };
      jsonx.jsonxRender.call(boundConfig,{ 
        jsonx: {
          component:'IntroHookComponent',
          props:{
            key:0
          }
        }, 
        querySelector:'#root', });
    </script>
  </body>
</html>